<template>
  <transition name="fade">
    <div id="preview" class="layui-layer-page layui-layer-prompt editor-content" v-show="isShow">
      <div class="layui-layer-title">预览</div>
      <div class="layui-layer-content">
        <div class="detail-body" v-html="replaceContent"></div>
      </div>
      <span class="layui-layer-setwin" @click.stop="close()">
        <a href="javascript:void(0)" class="layui-layer-ico layui-layer-close layui-layer-close1"></a>
      </span>
    </div>
  </transition>
</template>

<script>
import { escapeHtml } from '@/utils/escapeHtml'
export default {
  name: 'Preview',
  props: ['isShow', 'content'],
  computed: {
    // 根据填写的content 内容转化成对应的replaceHtml
    replaceContent () {
      if (typeof this.content === 'undefined' || this.content.trim() === '') {
        return
      }
      return escapeHtml(this.content)
    }
  },
  methods: {
    close () {
      this.$emit('closeEvent')
    }
  }

}
</script>

<style lang='scss' scoped>
#preview {
  position: fixed;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 10001;
  overflow-y: auto;
}
.detail-body {
  // max-width: 1000px;
  margin: 0 auto;
}

pre {
  position: relative;
  margin: 10px 0;
  padding: 15px;
  line-height: 20px;
  background: #f2f2f2;
  color: #333;
  font-family: "Courier New", Courier, monospace, serif;
  font-size: 12px;
  border: none;
  border-left: 5px solid #ddd;
}
</style>
